// webpack.config.js
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  mode: "production", // 或 'production'，根据你的需要设置
  entry: "./src/main.js", // 你的应用入口
  // entry: {
  //   pageA: './src/common/splitChunks/pageA.js',
  //   pageB: './src/common/splitChunks/pageB.js'
  // },
  output: {
    // hashFunction: 'xxhash64',
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].[contenthash:8].js", // 使用内容哈希作为文件名的一部分，以便在文件内容改变时更新文件名
    chunkFilename: '[name].[contenthash:8].chunk.js', // 非入口chunk的文件名
    publicPath: "/",
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, "src"),
      vue$: "vue/dist/vue.esm.js", // 使用运行时版本的 Vue
    },
    extensions: [".js", ".vue", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use:[
          {
            loader: 'thread-loader',
            options: {
              workers: 2,
            },
          }
        ]
      },
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   use: 'happypack/loader?id=js',  // 使用 HappyPack 的 loader
      // },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // {
      //   test: /\.(png|jpe?g|gif|svg)$/i,
      //   use: [
      //     {
      //       loader: "file-loader",
      //       options: {
      //         name: "[name].[hash].[ext]",
      //         outputPath: "images",
      //       },
      //     },
      //   ],
      // },

      {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/i, // 匹配图片和字体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 81920, // 设置limit值，即小于80k，就会将小于此大小的文件将被转换为Base64编码
              name: '[name].[contenthash:8].[ext]', // 输出文件的命名规则
              outputPath: 'assets/', // 输出文件的路径
              // 你可以添加其他url-loader的选项，比如publicPath等
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      inject: true,
    }),
    new HappyPack({
      id: 'js',  // 与 loader 中的 id 对应
      loaders: ['babel-loader'],  // 使用的 loader，这里以 babel-loader 为例
      threadPool: happyThreadPool,  // 使用之前创建的线程池
      cache: true,  // 启用缓存以加快二次构建速度
      verbose: true,  // 打印构建进度信息到控制台（可选）
    }),
    new CleanWebpackPlugin(), // 清理 /dist 文件夹
    // new webpack.HotModuleReplacementPlugin(), // 启用热模块替换
  ],

  optimization: {
    // 1.配置Tree Shaking
    usedExports: true,
    // 2.配置splitChunks
    splitChunks: {
      chunks: "all",
      maxInitialRequests: Infinity, // 设置初始请求数目无限制
      minSize: 0, // 为了测试，将最小尺寸设置为 0
      minChunks: 1, // 为了测试，将最小被引用次数设置为 1
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的模块
          priority: -10, // 缓存组的优先级（数字越小优先级越高）
          name(module) {
            // 自定义分割后的文件名
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
        default: {
          minChunks: 1, // 至少被引用1次的模块才会被分割到这个组
          priority: -20, // 较低的优先级，确保vendors组优先被分割
          reuseExistingChunk: true, // 如果模块已经存在于某个chunk中，则不会重复分割
        },
      }
    },
    runtimeChunk: {
      name: "runtime", // 将运行时代码分割到一个单独的chunk中
    },
    // 3.配置minimize
    minimize: true,
    minimizer: [
      new TerserPlugin({
        // TerserPlugin 的配置选项
        parallel: true, // 使用多进程并行运行来提高构建速度
        terserOptions: {
          // Terser 的配置选项
          compress: {
            drop_console: true, // 移除 console.log 语句
          },
        },
      }),
      new CssMinimizerPlugin(),// 用于压缩 CSS
    ],

    // 其他优化选项，如 runtimeChunk, minimize 等（可选）
  },
};
